@import url(media.less);

@baseFont: 50;

body {
    position: relative;
    min-width: 320px;
    width: (750rem / @baseFont);
    margin: 0 auto;
    background-color: #f5f5f5;
    font-family: Arial, Helvetica;
    // height: 3000px;
    &::after {
        content: "";
        display: block;
        height: (100rem / @baseFont);
    }
}

.w {
    width: (690rem / @baseFont);
}

.bg-img {
    width: (750rem / @baseFont);
    height: (344rem / @baseFont);
}

// 用户头像
.user {
    position: absolute;
    left: 0;
    top: (82rem / @baseFont);
    // width: 100%;
    height: (130rem / @baseFont);

    // background-color: pink;
    div {
        float: left;
    }

    .user-logo img {
        width: (128rem / @baseFont);
        margin: 0 (30rem / @baseFont);
    }

    .user-name {
        margin-top: (10rem / @baseFont);
    }

    .user-name span {
        font-size: (40rem / @baseFont);
        color: #ffffff;
    }

    .user-name p {
        margin-top: (5rem / @baseFont);
        font-size: (30rem / @baseFont);
        color: #ffffff;
    }
}

// 我的订单
.dingdan {
    position: relative;
    height: (285rem / @baseFont);
    background-color: #fff;
    margin: 0 auto;
    border-radius: (15rem / @baseFont);
    margin-top: -(80rem / @baseFont);

    h3 {
        height: (95rem / @baseFont);
        line-height: (95rem / @baseFont);
        padding-left: (20rem / @baseFont);
        font-size: (30rem / @baseFont);
        color: #333;
        border-bottom: (1rem / @baseFont) solid rgba(0, 0, 0, 0.1);
    }

    .dingdan-content {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        height: ((285rem - 95) / @baseFont);

        .box01 {
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: center;
            width: (140rem / @baseFont);
            height: (120rem / @baseFont);

            // background-color: deeppink;
            .dingdan-img01 img {
                width: (50rem / @baseFont);
                height: (40rem / @baseFont);
            }

            span {
                font-size: (24rem / @baseFont);
                color: #666;
            }
        }
    }
}

// 火锅logo
.huoguo-logo {
    margin: 0 auto;
    background-color: #fff;
    margin-top: (20rem / @baseFont);

    img {
        width: 100%;
    }
}

// 我的服务
.service {
    height: (418rem / @baseFont);
    background-color: #fff;
    margin: (20rem / @baseFont) auto;
    border-radius: (15rem / @baseFont);

    h3 {
        height: (95rem / @baseFont);
        line-height: (95rem / @baseFont);
        padding-left: (20rem / @baseFont);
        font-size: (30rem / @baseFont);
        border-bottom: (1rem / @baseFont) solid rgba(0, 0, 0, 0.1);
    }

    .service-content {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        height: ((418rem - 95) / @baseFont);

        .box02 {
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: center;
            // 这儿设置了25%，才会换行
            width: 25%;
            height: (140rem / @baseFont);

            // background-color: pink;
            img {
                width: (80rem / @baseFont);
                height: (64rem / @baseFont);
            }

            span {
                font-size: (24rem / @baseFont);
                color: #666;
            }
        }
    }
}

// 通用底部菜单栏
.footer-menu {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: (750rem / @baseFont);
    height: (100rem / @baseFont);
    background-color: #fff;

    a {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        width: 25%;
        color: #333;

        // border: 1px solid #000;
        div {
            width: (40rem / @baseFont);
            height: (40rem / @baseFont);
        }

        &:nth-of-type(1) div {
            background: url(../images/tab-index.png) no-repeat;
            background-size: 100%;
        }

        &:nth-of-type(2) div {
            background: url(../images/tab-category.png) no-repeat;
            background-size: 100%;
        }

        &:nth-of-type(3) div {
            background: url(../images/tab-cart.png) no-repeat;
            background-size: 100%;
        }

        &:nth-of-type(4) div {
            background: url(../images/tab-mine.png) no-repeat;
            background-size: 100%;
        }

        span {
            font-size: (22rem / @baseFont);
        }

        &:hover {
            color: red;
            text-decoration: none;
        }

        &:nth-of-type(1):hover div {
            background: url(../images/tab-index-active.png) no-repeat;
            background-size: 100%;
        }

        &:nth-of-type(2):hover div {
            background: url(../images/tab-category-active.png) no-repeat;
            background-size: contain;
        }

        &:nth-of-type(3):hover div {
            background: url(../images/tab-cart-active.png) no-repeat;
            background-size: contain;
        }

        &:nth-of-type(4):hover div {
            background: url(../images/tab-mine-active.png) no-repeat;
            background-size: contain;
        }
    }

}